<template>
  <view class="purchaseVip">
    <view class="notice" v-if="activeTimes.msg">{{activeTimes.msg}}</view>
    <view class="header card">
      <image
        class="diamond"
        src="https://talentsupload.oss-cn-beijing.aliyuncs.com/miniprogram/mine/diamond.png"
      />
      <!-- <view class="margin-t-20">{{vipInfo.vipTimes}}次</view> -->
      <view class="margin-t-20">到期时间：{{vipInfo.vipTimes}}</view>
    </view>

    <view class="denomination card">
      <view>购买权益</view>
      <view class="denomination-list">
        <block v-for="item in list" :key="item.id">
          <view
            v-if="item.price != 0"
            :class="['item', activeTimes.id == item.id && 'item-active']" 
            @tap="handleItem" 
            :data-item="item"
          >
            <p class="times" v-if="item.month == -1">终生会员</p>
            <p class="times" v-else>{{item.month}}<span class="suffix">年</span></p>
            <p class="price">{{item.price}}元</p>
          </view>
        </block>
      </view>
    </view>

    <view class="purchase-box card">
      <view class="btns">
        <custom-ButtonGroup
          color="#fff"
          bgColor="#04BE02"
          submitText="微信支付"
          width="260rpx"
          @handleTap="handleWxPay"
        />
        <custom-ButtonGroup 
          width="260rpx" 
          color="#fff" 
          submitText="对公支付"
          @handleTap="handleCopy"
        />
      </view>
      <view class="bank-info">
        <p>{{accountInfo[0]}}</p>
        <p>账号：{{accountInfo[1]}}</p>
        <p>开户行：{{accountInfo[2]}}</p>
      </view>
    </view>
  </view>
</template>
<script src="./indexMod.js"/>
<style src="./indexStyle.scss" lang="scss" scoped />